<template>
	<h3>1. 将class属性值绑定为字符串</h3>
	<div :class="boxname"></div>
	<h3>2. 将class属性值绑定为对象</h3>
	<div v-bind:class="{border:isBorder,text:isText}">将class属性值绑定为对象</div>
	<h3>3. 将class属性值绑定为数组</h3>
	<div :class="[className1,className2]">数组</div>
	
</template>

<script setup>
	import {ref,reactive} from 'vue'
	//样式绑定 class属性
	//1. 将class属性值绑定为字符串
	const boxname=ref('box')
	const isBorder=ref(true)
	const isText=ref(true)
	const className1=ref('inner')
	const className2=ref('text')
	
</script>

<style scoped>
	.box{
		width: 200px;
		height: 200px;
		background-color: cadetblue;
	}
	
	.text{
		font-size: 20px;
		color: brown;
	}
	
	.border{
		border: 2px dotted blueviolet;
	}
	
	.inner{
		height: 100px;
		width: 100px;
		border: 3px solid red;
	}
	
</style>